<template>
  <div class="detail-page">
    <el-row :gutter="24">
      <!-- 左侧大图 -->
      <el-col :span="12">
        <img :src="product.pic" class="main-img" />
      </el-col>

      <!-- 右侧信息 -->
      <el-col :span="12">
        <div class="info">
          <h1>{{ product.name }}</h1>
          <div class="summary">{{ product.summary }}</div>

          <div class="price-wrap">
            <span class="price">￥{{ product.price }}</span>
            <el-tag type="danger" size="small">{{ product.category }}</el-tag>
          </div>

          <el-rate :value="product.rating" disabled show-score text-color="#ff9000" />

          <div class="action">
            <el-input-number v-model="num" :min="1" :max="99" />
            <el-button type="danger" size="large" @click="addCart">加入购物车</el-button>
            <el-button type="primary" size="large" @click="buyNow">立即购买</el-button>
          </div>

          <el-divider />

          <div class="promo">
            <p>✓ 正品保证</p>
            <p>✓ 7天无理由退换</p>
            <p>✓ 24h 发货</p>
          </div>
        </div>
      </el-col>
    </el-row>

    <!-- 图文详情页签 -->
    <el-tabs v-model="activeTab" style="margin-top: 40px">
      <el-tab-pane label="商品详情" name="detail">
        <div class="html-detail" v-html="product.detailHtml"></div>
      </el-tab-pane>
      <el-tab-pane label="规格参数" name="spec">
        <el-table :data="product.spec" border>
          <el-table-column prop="key" label="参数" width="180" />
          <el-table-column prop="value" label="值" />
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="用户评价" name="comment">
        <div v-for="c in product.comments" :key="c.user" class="comment">
          <strong>{{ c.user }}</strong
          >：
          <el-rate :value="c.score" disabled />
          <p>{{ c.content }}</p>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'

const route = useRoute()
const num = ref(1)
const activeTab = ref('detail')

// 模拟数据（根据 ID 区分）
const products = {
  1: {
    name: 'iPhone 15 Pro',
    price: 7999,
    category: '电子产品',
    rating: 4.9,
    summary: '钛金属机身，A17 Pro 芯片，专业影像系统',
    pic: 'https://picsum.photos/seed/p1/600/600',
    detailHtml: `<p><img src="https://picsum.photos/seed/d1/800/400" style="width:100%"/></p><p>更多图文详情内容...</p>`,
    spec: [
      { key: '屏幕', value: '6.1 英寸' },
      { key: '芯片', value: 'A17 Pro' },
      { key: '重量', value: '187g' },
    ],
    comments: [
      { user: '张三', score: 5, content: '手感很棒，拍照清晰！' },
      { user: '李四', score: 4, content: '物流快，正品无误。' },
    ],
  },
  2: {
    name: '小米 14',
    price: 3999,
    category: '电子产品',
    rating: 4.7,
    summary: '骁龙 8 Gen3，徕卡影像',
    pic: 'https://picsum.photos/seed/p2/600/600',
    detailHtml:
      '<p><img src="https://picsum.photos/seed/d2/800/400" style="width:100%"/></p><p>更多图文详情内容...</p>',
    spec: [
      { key: '屏幕', value: '6.36 英寸' },
      { key: '芯片', value: '骁龙 8 Gen3' },
      { key: '重量', value: '193g' },
    ],
    comments: [{ user: '王五', score: 5, content: '性价比无敌！' }],
  },
}

const product = ref(products[route.params.id] || products[1])

function addCart() {
  ElMessage.success('已加入购物车')
}
function buyNow() {
  ElMessage.success('立即购买')
}
</script>

<style scoped>
.detail-page {
  max-width: 1200px;
  margin: 40px auto;
  padding: 0 20px;
}
.main-img {
  width: 100%;
  border-radius: 12px;
}
.info h1 {
  font-size: 28px;
  margin-bottom: 10px;
}
.summary {
  color: #666;
  margin-bottom: 20px;
}
.price-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 12px 0;
}
.price {
  font-size: 32px;
  color: #f56c6c;
  font-weight: bold;
}
.action {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
}
.promo p {
  margin: 4px 0;
  color: #777;
}
.html-detail img {
  width: 100%;
  border-radius: 8px;
}
.comment {
  margin-bottom: 16px;
  padding: 12px;
  background: #fafafa;
  border-radius: 8px;
}
</style>
